@charset "UTF-8";

/*
 * 定义alimm的常用布局
 * @module 	layout
 * @title	常用布局样式
 * @desc	提供常用的弹性布局，流体布局，固定宽度布局等，包括预定义的header、footer等
 */

/* 基础布局组 */
/* @group basic layout */

	/*
	 * 基础布局, thanks yaml.
	 *
	 * |-----------------------------|
	 * | #header                     |
	 * |-----------------------------|
	 * | #col1  | #col3      | #col2 | <--- #main
	 * | 200px  | flexible   | 200px |
	 * |        |            |       |
	 * |-----------------------------|
	 * | #footer                     |
	 * |-----------------------------|
	 *
	 */
	
	#header{
		position: relative;
	}
	
	/* 列容器#main */
	#main{
		clear: both;
		width: auto;
	}
	
	/* 左列，默认的宽度是200 Pixel */
	#col1{
		float: left;
		width: 200px;
		z-index: 3;
	}
	
	/* 右列，默认的宽度是200 Pixel */
	#col2{
		float: right;
		width: 200px;
		z-index: 5;
	}
	
	/* 居中自适应 */
	#col3{
		width: auto;
		margin: 0 210px;
		z-index: 1;
	}
	
	#col1_content{ z-index: 4; }
	#col2_content{ z-index: 6; }
	#col3_content{ z-index: 2; }
	
	/* IE5.x, IE6 */
	#col1_content, #col2_content, #col3_content{ position: relative; }
	
	#footer{
		clear: both;
		display: block;
	}
	
	/*
	 * 基础布局的列切换样式，thanks yaml
	 * 
	 * .hideboth	->	单列布局 single-column-layout (使用#col3)
	 * .hideleft	->	两列布局，sidebar在右 2-column-layout (使用#col2和#col3)
	 * .hideright	->	两列布局，sidebar在左 2-column-layout (使用#col1和#col3)
	 * .hidenone	->	三列布局 show all columns
	 */
	.hideboth #col1, .hideboth #col2{ display: none; }
	.hideboth #col3{
		margin-right: 0;
		margin-left: 0;
	}
	
	.hideleft #col1{ display: none; }
	.hideleft #col3{
		margin-left: 0;
		margin-right: 200px;
	}
	
	.hideright #col2{ display: none; }
	.hideright #col3{
		margin-left: 200px;
		margin-right: 0;
	}

/* @end */

/* 区块布局模板 */
/* @group block layout templates */

	/*
	 * 在容器内直接应用区块布局模板进行区块布局
	 * 将容器的样式设置为block-layout，容器内的列可以是以下预设值：
	 *
	 * left	    | right
	 * -----------------------
	 * 50% 	    | 50%
	 * 25%      | 75%
	 * 33.333%  | 66.666%
	 * 38.2%    | 61.8%
	 * 66.666%  | 33.333%
	 * 70%      | 30%
	 * 75%      | 25%
	 * 61.8%    | 8.2%
	 *
	 */
	
	.block-layout{
		width: 100%;
		overflow: hidden;
	}
	
	/* 预设列定义 */
	.c50l, .c25l, .c30l, .c33l, .c38l, .c66l, .c70l, .c75l, .c62l{ float: left; }
	.c50r, .c25r, .c30r, .c33r, .c38r, .c66r, .c70r, .c75r, .c62r{
		float: right;
		margin-left: -5px;
	}
	
	.c50l, .c50r{ width: 50%; }
	.c25l, .c25r{ width: 25%; }
	.c30l, .c30r{ width: 30%; }
	.c33l, .c33r{ width: 33.333%; }
	.c38l, .c38r{ width: 38.2%; }
	.c66l, .c66r{ width: 66.666%; }
	.c70l, .c70r{ width: 70%; }
	.c75l, .c75r{ width: 75%; }
	.c62l, .c62r{ width: 61.8%; }
	
	/* 预设列内容容器样式 */
	.blc{ padding: 0 0.5em; }
	.blcl{ padding: 0 1em 0 0; }
	.blcr{ padding: 0 0 0 1em; }

/* @end */